<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="打印表格(函数).js" type="text/javascript"></script>
    <style>
        *{margin: 0px;padding: 0px}
        div{
            height: 100px;width: 100px;background: red;
            position: absolute;top: 100px;left: 100px;
        }
    </style>
</head>
<body>
<!--
			运动：
				s = v.t



		-->


<!--
    需求： 点击button按钮让div框运动起来

        1. 制作静态效果

        2. 给btn按钮注册事件

    需求： 点击button按钮让div框运动起来，运动到1000的位置停止

        //如果偏移量等于1000就关闭计时器

    需求： 让div的速度慢下来；

        1. 改变运动的时间（时间一般使用30毫秒）

        2. 改变速度：

        //定义startMove函数
            function startMove(){

                //获取box
                var box = document.getElementById("box");

                var timer = setInterval(function(){

                    //如果偏移量等于1000就关闭计时器
                    if(box.offsetLeft == 1000){
                        clearInterval(timer);
                    }
                    //为left属性赋值
                    box.style.left = box.offsetLeft + 10 + "px";
                },30)

            }


    问题1：  当div框到达1000的位置时，再次点击按钮，div框继续往前运动

        解决方式： //定义startMove函数
            function startMove(){

                //获取box
                var box = document.getElementById("box");

                var timer = setInterval(function(){

                    //如果偏移量等于1000就关闭计时器
                    if(box.offsetLeft >= 1000){
                        clearInterval(timer);
                    }else{
                        //为left属性赋值
                        box.style.left = box.offsetLeft + 10 + "px";
                    }

                },30)

            }

    问题2： 第一次点击按钮后，div框运动过程中又连续点击多次div框，div框加速（点击多次按钮，开启了多个计时器，计时器相互叠加所以速度变快）

        解决方法：

-->
<button id="btn">开始运动</button>
<div id="box">

</div>

<script type="text/javascript">
    //获取按钮
    var box = document.getElementById("box");
    var btn = document.getElementById("btn");
    //注册事件
    btn.onclick = moveDiv;
    //在全局定义计时器
    var timer = null;

    function moveDiv() {
        //在开始下一个计时器之前关闭当前的计时器
        clearInterval(timer);

        //设置一个计时器，让一直运动
        timer = setInterval(function () {
            if (box.offsetLeft>=500){
                clearInterval(timer);
            }else{
                box.style.left = box.offsetLeft + 10 +"px";
            }
        },30);
    }

</script>

</body>
</html>